import React from 'react';
import {clearMyCar,delThis,changeThis} from "../../../redux/actions/shopCar";
import {connect} from "react-redux";
import './index.less'
import {withRouter} from "react-router-dom";
import {Popconfirm,Result,Button} from "antd";
import {CloseOutlined} from '@ant-design/icons'
import Notice from "../../../components/Notice";
function CarDeatil(props){
    //清空购物车
    function cleanAll(){
        const userid = sessionStorage.getItem('userId')
        if(props.carList.length === 0 || !userid){
            Notice('info','您的购物车为空或用户未登录')
        }else{
            props.clearMyCar(userid)
            Notice('success','清空购物车成功')
        }
    }
    //删除该类商品
    function delThis(gid,gcolor){
        return () => {
            const userid = sessionStorage.getItem('userId')
            props.delThis(userid,gid,gcolor)
            Notice('success','删除该商品成功')
        }
    }
    //当购物车为空或者用户未登录时
    function emptyCar() {
        return (
                <Result
                    title="您的购物车为空或用户未登录！"
                    extra={
                        <Button type="primary" key="console" onClick={() => props.history.push('/mall/home')}>
                            去购物！
                        </Button>
                    }
                />
        )
    }
    //更改商品数量
    function change(gid,gcolor,type,gcount){
        if(type === 'sub' && gcount*1 === 1) return
        return () => {
            const userid = sessionStorage.getItem('userId')
            props.changeThis(userid,gid,gcolor,type)
        }
    }
    function getAllPrice(){
        let price = 0;
        props.carList.forEach(item => {
            price += item.gcount * item.gprice
        })
        return price.toFixed(2)
    }
    return (
        <div className='carDetail'>
            {/*标题*/}
            <h1>商品清单</h1>
            <div className='clearCar'>
                <Popconfirm placement="topRight" title='确定要清空购物车?' onConfirm={cleanAll} okText="确定" cancelText="取消">
                    <span>
                    清空购物车列表
                </span>
                </Popconfirm>
            </div>
            {/*购物车清单*/}
            <div className='carList'>
                {
                    props.carList.length === 0 ? emptyCar(): props.carList.map(item => {
                        return (
                            <div key={`${item.gname + item.gcolor}`}>
                                <div className='carListItem'>
                                    <div className='carListItemImg'>
                                        <img src={item.gimg} alt=""/>
                                    </div>
                                    <div className='carListName'>
                                        {item.gname}
                                        <div className='goodsColor'>{item.gcolor}</div>
                                    </div>
                                    <div className='carListPrice'>
                                        ￥{item.gprice}
                                    </div>
                                    <div className='carListChangeCount'>
                                        <Button className='subBtn' onClick={change(item.gid,item.gcolor,'sub',item.gcount)} aria-disabled={item.gcount*1 === 1 ? 'true' : 'false'}>-</Button>
                                        <div className='itemCount'>{item.gcount}</div>
                                        <Button className='addBtn' onClick={change(item.gid,item.gcolor,'add')}>+</Button>
                                    </div>
                                    <div className='totalPrice'>
                                        ￥{(item.gcount * item.gprice).toFixed(2)}
                                    </div>
                                    <div className='delThis'>
                                        <Popconfirm placement="bottom" title='确定删除该类商品?' onConfirm={delThis(item.gid,item.gcolor)} okText="确定" cancelText="取消">
                                            <CloseOutlined/>
                                        </Popconfirm>
                                    </div>
                                </div>
                            </div>

                        )
                    })
                }
                <div className='allPrice'>
                    <span className='cashDesc'>
                        合计(不含运费)
                    </span>
                    <span className='cash'>
                        ￥{getAllPrice()}
                    </span>
                </div>
            </div>

        </div>
    )
}
export default withRouter(connect(
    state => ({carList: state.carList}),
    {
        clearMyCar,
        delThis,
        changeThis
    }
)(CarDeatil))